<template>
  <v-card class="mx-auto">
    <v-card-title>编辑先天学习特质配置</v-card-title>
    <v-card-text>
      <v-row dense>
        <v-col cols="6">
          <ReportTargetSelector
            v-model="localLearnType.report_target"
          ></ReportTargetSelector>
        </v-col>
        <v-col cols="6">
          <LearnTypeEnumSelector
            v-model="localLearnType.learn_type"
          ></LearnTypeEnumSelector>
        </v-col>
      </v-row>
      <v-row dense>
        <v-col cols="12">
          <RichTextEditor
            v-model="localLearnType.content"
            @update:contentText="localLearnType.content_text = $event"
          >
          </RichTextEditor>
        </v-col>
        <v-col cols="12">
          <AudioUploader
            v-model="localLearnType.audio"
            parent_dir="fingerconfig"
            label="可选，语音播报"
          ></AudioUploader>
        </v-col>
      </v-row>
    </v-card-text>
    <v-card-actions>
      <v-btn color="grey" small @click.stop="$emit('cancel')">取消</v-btn>
      <v-spacer></v-spacer>
      <v-btn color="primary" small @click.stop="onSave">保存</v-btn>
      <v-btn color="primary" small @click.stop="onFinishEdit">保存&关闭</v-btn>
    </v-card-actions>
  </v-card>
</template>

<script>
  // 编辑功能
  // emit cancel和finish

  import LearnTypeEnumSelector from "./LearnTypeEnumSelector"
  import ReportTargetSelector from "../ReportTargetSelector"
  import AudioUploader from "@/components/file/AudioUploader";
  import RichTextEditor from "@/components/RichTextEditor"

  import { LearnTypeConfig } from "@/store/models/finger_config"
  import merge from "lodash/merge"

  export default {
    name: "LearnTypeConfigEditor",
    components: {
      RichTextEditor,
      LearnTypeEnumSelector,
      ReportTargetSelector,
      AudioUploader
    },
    props: {
      LearnType: Object,
    },
    data: () => ({
      localLearnType: new LearnTypeConfig(),
    }),
    computed: {
      onAdding() {
        return !this.LearnType.id || this.LearnType.id == 0
      },
    },
    watch: {
      LearnType: {
        handler(val) {
          if (val) {
            this.localLearnType = merge(new LearnTypeConfig(), val)
          }
        },
        deep: true,
        immediate: true,
      },
    },
    methods: {
      onFinishEdit() {
        this.$dialog.confirm({
          text: "确定要保存到服务器",
          title: "警告",
          waitForResult: true,
          actions: {
            false: {
              text: "取消",
              color: "blue",
            },
            true: {
              text: "确定",
              color: "red",
              handle: () => {
                return this.localLearnType.createOrUpdate().then((res) => {
                  this.$emit("finish", res)
                  return
                })
              },
            },
          },
        })
      },
      onSave() {
        this.localLearnType.createOrUpdate().then((res) => {
          return
        })
      },
    },
  }
</script>
